<template>
  <a-drawer
    :title="title"
    :closable="false"
    :maskClosable="true"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading">
    <a-spin :spinning="confirmLoading">
      <a-tabs v-model="tabIndex" hide-add type="card">
        <a-tab-pane tab="当前打分项" :key="0">
          <a-form :form="form">
            <a-row :gutter="24">
              <a-col :md="24" :sm="24" v-for="(item, index) in scoreList" :key="item.id">
                <a-form-item :label="item.itemName" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                  <a-input-number :min="0" :max="item.fullScore" width="500" v-model="scoredList[index]"/>
                  <label style="margin-left: 20px">满分：{{ item.fullScore }}</label>
                </a-form-item>
              </a-col>
              <a-col :md="24" :sm="24">
                <a-form-item label="总分" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                  <a-input-number width="500" v-model="totalScored" disabled/>
                  <label style="margin-left: 20px">满分：{{ totalScore }}</label>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane tab="历史打分项目" :key="1" v-if="existScoredList.length > 0">
          <a-form>
            <a-col :md="24" :sm="24" v-for="item in existScoredList" :key="item.id">
              <a-form-item :label="item.itemName" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number disabled width="500" v-model="item.itemScore"/>
                <label style="margin-left: 20px">满分：{{ item.itemFullScore }}</label>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item label="总分" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                <a-input-number width="500" :value="existTotalScored" disabled/>
                <label style="margin-left: 20px">满分：{{ existFullTotalScored }}</label>
              </a-form-item>
            </a-col>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <div class="drawer-footer">
      <a-button class="left" @click="handleCancel"> 关闭</a-button>
      <a-button class="right" type="primary" @click="handleSubmit"> 提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { scoreItemList } from '@/api/modular/main/scoreItemManage'
  import { scoreRecordsSave, scoreRecordsList } from '@/api/modular/main/scoreRecordsManage'

  export default {
    data() {
      return {
        tabIndex: 0,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        id: undefined,
        title: '',
        visible: false,
        confirmLoading: false,
        record: {},
        category: null,
        form: this.$form.createForm(this),
        scoreList: [],
        scoredList: [],
        existScoredList: [] // 已经存在的所有历史打分项
      }
    },
    computed: {
      totalScore() {
        if (this.scoreList.length === 0) return 0
        return this.scoreList.reduce((prev, current) => prev + current.fullScore, 0)
      },
      totalScored() {
        if (this.scoredList.length === 0) return 0
        return this.scoredList.reduce((sum, item) => sum + item)
      },
      existTotalScored() {
        if (this.existScoredList.length === 0) return 0
        return this.existScoredList.map(item => item.itemScore).reduce((sum, item) => sum + item)
      },
      existFullTotalScored() {
        if (this.existScoredList.length === 0) return 0
        return this.existScoredList.map(item => item.itemFullScore).reduce((sum, item) => sum + item)
      }
    },
    methods: {
      // 初始化方法
      open(record, category) {
        this.confirmLoading = true
        this.title = category === 0 ? '项目打分' : '答辩打分'
        this.category = category
        this.loadScoreItems(record, category)
        this.visible = true
        this.confirmLoading = false
      },
      loadScoreItems(record, category) {
        scoreItemList({
          status: 0,
          category: category
        }).then((res) => {
          if (res.success) {
            this.scoreList = res.data
            this.scoredList = res.data.map((item) => 0)

            if (record === null || record === undefined) return
            this.record = record
            if (record.courseSelectionId) {
              this.loadScoreRecords(record.courseSelectionId, category)
            }
          }
        })
      },
      loadScoreRecords(courseSelectionId, category) {
        scoreRecordsList({
          courseSelectionId: courseSelectionId,
          category: category
        }).then((res) => {
          if (res.success) {
            this.existScoredList = res.data

            this.scoredList = this.scoreList.map((scoreItem) => {
              const matched = res.data.find(scoredItem =>
                scoredItem.itemId === scoreItem.id &&
                scoredItem.itemName === scoreItem.itemName &&
                scoredItem.itemFullScore === scoreItem.fullScore)
              return matched ? matched.itemScore : 0
            })
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmit() {
        this.confirmLoading = true
        const dataList = this.scoreList.map((item, index) => {
          const itemScore = this.scoredList[index]
          return {
            courseScheduleId: this.record.courseScheduleId,
            courseSelectionId: this.record.courseSelectionId,
            itemId: item.id,
            itemScore: itemScore || 0, // null默认为0
            category: this.category
          }
        })
        // console.log(dataList)
        scoreRecordsSave(dataList)
          .then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.confirmLoading = false
              this.$emit('ok')
              this.handleCancel()
            } else {
              this.$message.error('保存失败') // + res.message
            }
          })
          .finally((res) => {
            this.confirmLoading = false
          })
      },
      handleCancel() {
        this.form.resetFields()
        this.visible = false
        this.scoreList = []
        this.scoredList = []
        this.tabIndex = 0
        this.existScoredList = []
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
